<template>
    <el-dialog
    class="delete-dialog"
    :visible="visible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="30%"
  > 
    <div slot="title" class="dialog-header">
      <span> 确认删除</span>
    </div>
    <div class="content">{{content}}</div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="closeDialog">关闭</el-button>
      <el-button
        type="primary"
        @click.native="handleSubmit"
      >确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    name: 'DeleteDialog',
    props: {
      visible: Boolean,
      content: String
    },
    methods: {
      closeDialog(){
        this.$emit('closeDialog')

      },
      handleSubmit(){
        this.$emit('submitDelete')
      }
    }
  }
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss';
.delete-dialog {
    ::v-deep .el-dialog__header {
      padding: 15px 20px;
      background: rgb(242, 243, 248);
      .el-dialog__title{
        padding-left: 10px;
        border-left: 2px solid $primary-color;
        line-height: 24px;
        font-size: 16px;
        color: #303133;
      }
      .el-dialog__headerbtn {
        top: 14px;
        .el-dialog__close {
          color: #303133;
        }
      }
    }
    ::v-deep .el-dialog__body{
      padding: 20px 20px;
      .title{
        margin-bottom: 20px;
        font-size: 16px;
      }
    }
    ::v-deep .el-dialog__footer {
      text-align: center;
    }
  }

</style>